<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电影院后台界面</title>
  <script src="../js/vue.min.js"></script>
  <script src="../js/axios.min.js"></script>
  <script src="../js/jquery.js"></script>
  <!-- 引入样式 -->
    <link rel="stylesheet" href="../ele-2.15.7/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="../ele-2.15.7/index.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="">
            <el-image src="../image/YYDS.png" style="height: 80px;width: 200px;float: right;margin-bottom: 50px" ></el-image>
            <h3>尊敬的管理员{{name}}，欢迎回来</h3>
        </el-header>
        <el-container>
            <el-aside width="150px" >
                <el-menu
                        active-text-color="#0000ff"
                        text-color="#a0cfff"
                        default-active="1"
                        class="el-menu-vertical-demo">
                    <el-menu-item index="1">
                        <a href="user.html">
                            <i class="el-icon-menu"></i>
                            <span slot="title">用户管理</span>
                        </a>
                    </el-menu-item>
                    <el-menu-item index="2" >
                        <a href="movie.html">
                            <i class="el-icon-document"></i>
                            <span slot="title">影片管理</span>
                        </a>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <a href="arrange.html">
                            <i class="el-icon-setting"></i>
                            <span slot="title">影片安排</span>
                        </a>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <a href="cinema.html">
                            <i class="el-icon-location"></i>
                            <span slot="title">影院管理</span>
                        </a>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <a href="indent.html">
                            <i class="el-icon-menu"></i>
                            <span slot="title">订单管理</span>
                        </a>
                    </el-menu-item>
                    <el-menu-item index="6">
                        <a href="AboutMe.html">
                            <i class="el-icon-setting"></i>
                            <span slot="title">友情链接管理</span>
                        </a>
                    </el-menu-item>
                </el-menu>
            </el-aside>

            <el-main>
                <el-container>
                    <el-header>
                        <el-form :inline="true" class="demo-form-inline" style="display: flex; align-items: center">
                            <el-form-item label="影院id">
                                <el-input v-model="cinemaid" placeholder="用户id"></el-input>
                            </el-form-item>
                            <el-form-item label="影片id">
                                <el-input v-model="movieid" placeholder="用户id"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click.prevent="query()">查询</el-button>
                                <el-button type="primary" @click.prevent="create()" >添加</el-button>
                            </el-form-item>
                        </el-form>
                    </el-header>
                    <el-container>
                        <el-main>
                            <el-table :data="tableData.data" style="width: 100%" border>
                                <el-table-column prop="cinemaid" label="影院id"></el-table-column>
                                <el-table-column prop="movieid" label="影片id"></el-table-column>
                                <el-table-column prop="starttime" label="开始时间"></el-table-column>
                                <el-table-column prop="starttime" label="结束时间"></el-table-column>
                                <el-table-column prop="sell" label="售票价格"></el-table-column>
                                <el-table-column prop="remainseats" label="剩余座位"></el-table-column>
                                <el-table-column
                                        fixed="right"
                                        label="操作"
                                        width="100">
                                    <template slot-scope="scope">
                                        <el-button @click="modify(scope.row)"  type="text" size="small">编辑</el-button>
                                        <el-button @click="remove(scope.row)"  type="text" size="small">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-main>
                    </el-container>
                    <el-footer style="text-align: right">
                        <el-pagination :page-size="pageSize" @current-change="query" @size-change="sizeChange"
                                       background :page-sizes="[2,3,4,5]"
                                       layout="sizes, prev, pager, next"
                                       :total="tableData.total"
                                       :current-page.sync="tableData.page" >
                        </el-pagination>
                    </el-footer>
                </el-container>
                <el-dialog title="安排管理" :visible.sync="dialogFormVisible">
                    <div style="display: flex; justify-content: space-around;">
                        <el-form >
                            <el-form-item label="影院id" :label-width="formLabelWidth">
                                <el-input v-model="editArrange.cinemaid" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="影片id" :label-width="formLabelWidth">
                                <el-input v-model="editArrange.movieid" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="" :label-width="formLabelWidth">
                                <div class="block">
                                    <span class="demonstration">开始时间</span>
                                    <el-date-picker
                                            v-model="editArrange.starttime"
                                            type="datetime"
                                            placeholder="选择日期时间">
                                    </el-date-picker>
                                </div>
                            </el-form-item>
                            <el-form-item label="" :label-width="formLabelWidth">
                                <div class="block">
                                    <span class="demonstration">结束时间</span>
                                    <el-date-picker
                                            v-model="editArrange.endtime"
                                            type="datetime"
                                            placeholder="选择日期时间">
                                    </el-date-picker>
                                </div>
                            </el-form-item>
                            <el-form-item label="售票价格" :label-width="formLabelWidth">
                                <el-input v-model="editArrange.sell" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="剩余座位" :label-width="formLabelWidth">
                                <el-input v-model="editArrange.remainseats" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>

                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="saveArrange">确 定</el-button>
                    </div>
                </el-dialog>

            </el-main>
        </el-container>
    </el-container>
</div>

<script>
    var v=new Vue({
        el:"#app",
        data:{
            tableData:{},
            pageSize:2,
            cinemaid:"",
            movieid:"",
            editArrange:{cinemaid:"",movieid:"",starttime:"",endtime:"",sell:"",remainseats:""},
            dialogFormVisible:false,
            formLabelWidth:"100px",
            name:"",
        },
        created(){
            this.query(1),
                axios.get("../GetUserServlet.s").then(res=>{
                    this.name = res.data
                })
        },
        methods:{
            sizeChange(size){
                this.pageSize=size,
                    this.query(1)
            },
            query (page){
                axios({
                    url:"../QueryArrangeServlet.s",
                    params: {
                        cinemaid:this.cinemaid,
                        movieid:this.movieid,
                        currentPage:page,
                        pageSize:this.pageSize
                    }
                }).then((res)=>{
                    this.tableData=res.data;
                    this.tableData.page = page;
                });
            },
            create(){
                this.editArrange={cinemaid:"",movieid:"",starttime:"",endtime:"",sell:"",remainseats:""};
                this.dialogFormVisible=true;
            },
            saveArrange(){
                var params=new URLSearchParams();
                if(this.editArrange.starttime!=null){
                    this.editArrange.starttime=new Date(this.editArrange.starttime).toLocaleString();
                    this.editArrange.starttime=this.editArrange.starttime.replace(/\//g,"-")
                }
                if(this.editArrange.endtime!=null){
                    this.editArrange.endtime=new Date(this.editArrange.endtime).toLocaleString();
                    this.editArrange.endtime=this.editArrange.endtime.replace(/\//g,"-")
                }
                for(let name in this.editArrange){
                    params.append(name,this.editArrange[name]);
                }

                axios.post("../SaveArrangeServlet.s",params).then(res=>{
                    if(res.data.code==1){
                        this.$message(res.data.msg);
                        this.query(1);
                        this.dialogFormVisible=false;
                    }else{
                        this.$alert(res.data.msg);
                    }
                });
            },
            modify(arrange){
                for(let name in arrange){
                    this.editArrange[name]=arrange[name];
                }
                this.dialogFormVisible=true;
            },
            remove(arrange){
                this.$confirm('此操作将删除该影片, 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    axios.get("../RemoveArrangeServlet.s",{
                        params : {
                            ppjhid : arrange.ppjhid,
                        }
                    }).then(res=>{
                        this.$message('已删除!');
                        this.query(1);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        },

    })
</script>
<style>
    html,body,#app{
        height: 100%;
        padding: 0px;
        margin: 0px;
    }
    .el-container{
        height: 100%;
    }
    .el-tabs__content{
        height: calc(100% - 68px);
    }
    .el-tab-pane{
        height: 100%;
    }
</style>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
</body>
</html>